<!-- 安防大屏 -->

<template>
  <div id="SecureScreen-IframeWrapper" class="SecureScreen">
    <el-dialog
      title="电子地图"
      :visible.sync="videoMapDialogVisible"
      width="90vw"
      top="5vh"
      custom-class="SecureScreen-video-map-dialog"
      :append-to-body="true"
      :destroy-on-close="false"
    >
      <VideoMap v-if="videoMapDialogVisible" :rootId="videoMapRegionRootId" ref="SecureScreen-VideoMap" />
    </el-dialog>

    <el-dialog
      title="视频巡逻"
      :visible.sync="videoPatrolDialogVisible"
      width="90vw"
      top="5vh"
      custom-class="SecureScreen-video-play-dialog"
      :append-to-body="true"
      :destroy-on-close="true"
    >
      <VideoPlay v-if="videoPatrolDialogVisible" />
    </el-dialog>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import VideoMap from '@admin/views/Secure/Video/VideoMap'
import VideoPlay from '@admin/views/Secure/Video/HaikangPlay'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'SecureScreen',

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      /**
       * 电子地图区域树根 ID
       */
      videoMapRegionRootId: '',
      /**
       * 电子地图对话框是否显示
       */
      videoMapDialogVisible: false,
      /**
       * 视频巡逻对话框是否显示
       */
      videoPatrolDialogVisible: false,
    }
  },

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  components: {
    VideoMap,
    VideoPlay,
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * @function 标记点绑定事件
     * @param {HTMLDocument} iframeDocument
     */
    spriteAddEvent(iframeDocument) {
      const buildPointSpriteList = iframeDocument.getElementsByClassName('zibo-alarm-center__build-point-sprite')
      for (let i = 0; i < buildPointSpriteList.length; i++) {
        buildPointSpriteList[i].addEventListener('click', () => {
          this.videoMapRegionRootId = buildPointSpriteList[i].dataset.id
          this.videoMapDialogVisible = !this.videoMapDialogVisible
        })
      }

      const videoPatrolBtn = iframeDocument.getElementById('video-patrol-btn')
      videoPatrolBtn && videoPatrolBtn.addEventListener('click', (_event) => {
        this.videoPatrolDialogVisible = !this.videoPatrolDialogVisible
      })

      const alarmListMoreBtn = iframeDocument.getElementById('alarm-list-more-btn')
      alarmListMoreBtn && alarmListMoreBtn.addEventListener('click', () => {
        this.$router.push({
          name: 'MaintainAlarm_AlarmList',
        })
      })
    },
  },

  /**
   * 挂载完成 (先抽取再调用)
   */
  mounted() {
    const iframe = document.createElement('iframe')
    iframe.src = `${process.env.VUE_APP_SCREEN}/alarm-center.html`
    iframe.width = '100vw'
    iframe.height = '100vh'
    iframe.scrolling = 'no'
    iframe.className = 'SecureScreen__iframe'
    // iframe.style.display = 'none'
    iframe.onload = () => {
      const iframeDocument = iframe.contentDocument || iframe.contentWindow.document
      const styleElement = document.createElement('style')
      styleElement.append(`
        .zibo-alarm-center .app-header-2 { display: none; }
        .lift-safety .app-header-2 { background-image: none; }
      `)
      this.$nextTick(() => {
        iframeDocument.head.appendChild(styleElement)
        this.spriteAddEvent(iframeDocument)
      })
    }

    this.$nextTick(() => {
      const iframeWrapper = document.getElementById('SecureScreen-IframeWrapper')
      iframeWrapper.appendChild(iframe)
    })
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
